<template>
  <el-dialog title="批量上传资源" :visible.sync="visible" width="40%">
    <el-form :model="formData">
      <el-form-item label="请上传文件：" >
        <jdldUpload class="upload-template"
          :onSuccess="uploadSuccess"
          :minSize="50"
          :chunkSize="10"
          :isMulti="true"
          :onProgress="uploadProgress"
          >
          <el-button type="success" size="small" >上传文件</el-button>
        </jdldUpload>
      </el-form-item>
      <el-form-item v-for="(item, index) in progressItemArr" :key="index">
        {{item.originName}}<br>
        <el-progress :percentage="item.percent" ></el-progress>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel()">取 消</el-button>
      <el-button type="primary" @click="add()" >确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import jdldUpload from "../upload/upload";
  export default {
    name: "InputDialog",
    components: {
      jdldUpload,
    },
    data() {
      return {
        visible: false,
        formData:{},
        progressItemArr:[],
        fileList:[],
      }
    },
    props: {
      bookId: {
        type: String,
        default: '',
      },
      cateId: {
        type: String,
        default: '',
      },
    },
    methods: {
      add(data) {
        if(this.bookId==''){
          this.$message.success('图书id未取到值');
          return;
        }
        const loading = this.$loading({
          lock: true,
          text: '资源在处理中，请稍后...'
        });
        let param = {fileList:this.fileList, bookId: this.bookId, cateId:this.cateId}
        this.axios.post(CONST.SERVICE_REST_PACKAGE + "increaseResource/batchUploadResource", param)
          .then((response) => {
            loading.close();
            let retultData = response.data
            let notCount = 0
            let excepCount = 0
            let successCount=0;
            let notStr = ''
            let excepStr = ''
            for(let i=0;i<retultData.length;i++){
              let item = retultData[i]
              if(item.flag=='1'){
                notCount++
                notStr=notStr+'<div><span>'+item.fileName+'</span></div>'
              }else if(item.flag=='2'){
                excepCount++
                excepStr=excepStr+'<div><span>'+item.fileName+'：</span></div>'
              }else{
                successCount++
              }
            }
            let msgStr = '<div><span style="font-weight:bold">本次共上传文件：'+retultData.length+'条，导入成功'+successCount+'条。</span><br>'
            if(notCount!=0){
              msgStr = msgStr+'<span style="font-weight:bold">与模板中名称不匹配的有'+notCount+'条，文件为：</span>'+notStr
            }
            if(excepCount!=0){
              msgStr = msgStr+'<span style="font-weight:bold">异常文件数'+excepCount+'条，文件为：</span>'+excepStr
            }
            msgStr = msgStr+excepStr+'</div>'
            this.$alert(msgStr, '导入结果', {
              dangerouslyUseHTMLString: true
            });
            this.closeDialogue();
            this.$emit('get-resource-data');
          }).catch(err=>{
            this.$message.success(err);
            loading.close();
          });
          this.closeDialogue()
      },
      uploadSuccess(resp){
        let img = {originName:resp.originName,fileUrl:resp.url}
        this.fileList.push(img)
      },
      uploadProgress(resp){
        let temp = {}
        for(let i=0;i<this.progressItemArr.length;i++){
          let item = this.progressItemArr[i]
          if(item.id==resp.id){
            temp = item
          }
        }
        if(temp.id){
          temp.percent=Number(resp.percent)
        }else{
          let item = {id:resp.id,percent:Number(resp.percent),originName:resp.originName}
          this.progressItemArr.push(item)
        }
      },
      handleRemove(file, fileList){
        this.filePath='';
      },
      cancel(){
        this.closeDialogue();
      },
      closeDialogue(){
        this.visible = false
        this.progressItemArr=[]
        this.fileList = []
      },
    },
  }
</script>

<style scoped>
  .upload-template{
    display: inline-block;
  }
</style>
